﻿@using XRepair.Conventions.Enum
@using xCache = MvcXRepairCustomer.CacheData
@using XRepair.Models

@model MvcXRepair.Models.Device
@{
    ViewBag.Title = "xRepair";

    List<Brand> activeBrands = xCache.Cache.GetAllActiveBrands();
    List<Model> activeModels = xCache.Cache.GetAllActiveModels();

    var brandList = activeBrands.ConvertAll<SelectListItem>(x => new SelectListItem { Value = x.ID.Value.ToString(), Text = x.BrandName });

    brandList.Insert(0, new SelectListItem { Value = string.Empty, Text = "Select brand", Selected = true });

    //List<SelectListItem> brandList = ViewBag.BrandList as List<SelectListItem>;
    //List<SelectListItem> modelList = ViewBag.ModelList as List<SelectListItem>;
}
@using (Html.BeginForm("placeorder", "home", FormMethod.Post, new { id = "frmDeviceInfo" }))
{
    <table>
        @*<tr>
            <td>Device Type:</td>
            <td>
                @Html.DropDownListFor(x => x.Type,
                        new List<SelectListItem>
                        {
                            new SelectListItem{Text="- Select device -", Value=string.Empty},
                            new SelectListItem{Text="Tablet", Value="Tablet"},
                            new SelectListItem{Text="Smartphone", Value="Smartphone"}
                        }
                    )
            </td>
        </tr>*@
        <tr>
            <td>Brand:</td>
            <td>@Html.DropDownListFor(x => x.Brand, brandList)

            </td>
        </tr>
        <tr>
            <td>Model:</td>
            <td>@Html.DropDownListFor(x => x.Model, new List<SelectListItem> { new SelectListItem { Value = string.Empty, Text = "Waiting for selected brand" } })

            </td>
        </tr>
        @*<tr>
            <td>Version:</td>
            <td>@Html.TextBoxFor(x => x.Version)</td>
        </tr>*@
        @*<tr>
            <td>Manufacturer:</td>
            <td>@Html.DropDownListFor(x => x.Manufacturer,
                    new List<SelectListItem> 
                    { 
                        new SelectListItem{Text="- Select manufacturer -", Value = string.Empty},
                        new SelectListItem{Text="Apple", Value = "Apple"},
                        new SelectListItem{Text="Samsung", Value = "Samsung"},
                        new SelectListItem{Text="LG", Value = "LG"},        
                    })
            </td>
        </tr>*@
    </table>
    
    <input type="submit" value="Continue" id="btnSubmit" />
}

@section lazy
{
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\jquery-ui-1.8.20.min.js")"></script>
    <script type="text/javascript">
        $(function () {
            $("#Brand").change(function(){
                UpdateModelOptions($(this));
            });

        });

        function UpdateModelOptions(contextObj)
        {
            var newVal = $(contextObj).val();
            var html = "";

            if(!newVal == false)
            {
                html = '<option value="" selected="selected">Select model</option>';

                for(var i = 0; i < modelJson.length; i++)
                {
                    var modelItem = modelJson[i];

                    if(modelItem.BrandID == newVal)
                    {
                        html += '<option value="' + modelItem.ID + '">' + modelItem.ModelName + '</option>';
                    }
                }
            }
            else
            {
                html = '<option value="" selected="selected">Wait for selected brand</option>';
            }

            $(contextObj).closest("table").find("#Model option").remove();            
            $(contextObj).closest("table").find("#Model").append(html);
        }
        var modelJson = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(activeModels))
    </script>
}